import {Component} from 'react';
import PropTypes from "prop-types";
import "./index.scss"

export default class Footer extends Component {
  static propTypes = {
    todos: PropTypes.array.isRequired,
    checkedAllTodo: PropTypes.func,
    clearFinishTodos: PropTypes.func,
  }

  // 全选、取消全选
  handleCheckedAll = (event) => {
    this.props.checkedAllTodo(event.target.checked)
  }

  // 清除已完成
  handleClearFinished = () => {
    this.props.clearFinishTodos()
  }

  render() {
    const {todos} = this.props
    const total = todos.length
    const finish = todos.reduce((pre, current) => pre + (current.done ? 1 : 0), 0)
    return (
      <div className="todo-footer">
        <div className="left">
          <input type="checkbox" checked={total === finish && total !== 0} onChange={this.handleCheckedAll}/>
          <div>已完成{finish} / 全部{total}</div>
        </div>
        <button onClick={this.handleClearFinished}>清除已完成任务</button>
      </div>
    );
  }
}

